<template>
  <div>
    <div>
      <div style="padding: 10px">
        <div class="grid-content bg-purple-light" style="text-align: left">
          <el-button @click="OpenDialog=true"  style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">新增</el-button>
          <el-button @click="EditDialog" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">编辑</el-button>
          <el-button @click="del" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">删除</el-button>
          <el-button @click="reset" style="font-size: 15px ;border: 0;background-color:#479eff ;color: white">重置密码</el-button>
          <div  style="text-align: left">
            <el-dialog title="添加用户" @open="Open" :visible.sync="OpenDialog" style="width: 880px;left: 18%" :close-on-click-modal="false" >
              <el-form  v-model="UserForm"  ref="UserForm" class="demo-ruleForm" style="text-align: right">
                <el-form-item size="10px" label="登录名:"  prop="name">
                  <el-input style="width:300px" type="text" v-model="UserForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <!--<el-form-item label="密码:"  prop="passWord">
                  <el-input style="width:300px" type="text" v-model="UserForm.passWord" autocomplete="off"></el-input>
                </el-form-item>-->
                <el-form-item label="中文名:"  prop="realName">
                  <el-input style="width:300px" type="text" v-model="UserForm.realName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号:" prop="phone">
                  <el-input style="width:300px" type="text" v-model="UserForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" prop="email">
                  <el-input style="width:300px" type="text" v-model="UserForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色:">
                  <el-select v-model="UserForm.role" style="width: 300px" placeholder="请选择">
                    <el-option
                      v-for="(item,index) in RoleOptions"
                      :key="item.index"
                      :label="item.name"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="部门:">
                  <el-select v-model="UserForm.depart" style="width: 300px" placeholder="请选择">
                    <el-option
                      v-bind:value="item.value"
                      v-for="item in DepartOptions"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                      >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="是否启用:">
                  <el-switch style="width: 300px" v-model="UserForm.estatus" active-value="1" inactive-value="0"  active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </el-form-item>
              </el-form>
              <div style="text-align: right">
                <el-button @click="closeForm">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
    <div >
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;text-align: center"
        border
        v-model="multipleSelection"
        @selection-change="handleSelectionChange"
        :header-cell-style="{'text-align':'center'}"
        align="center"
        >
        <el-table-column type="selection" stripe:true width="55" align="center">
        </el-table-column>
        <el-table-column prop="name" label="登录名" width="150" align="center">
        </el-table-column>
        <el-table-column prop="realName" label="中文名" width="150" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center" >
        </el-table-column>
        <el-table-column prop="email" label="邮箱" align="center">
        </el-table-column>
        <el-table-column prop="role" label="角色" align="center">
        </el-table-column>
        <el-table-column prop="depart" label="部门" align="center">
        </el-table-column>
        <el-table-column  property="estatus"  label="是否启用" align="center" >
          <template slot-scope="scope" >
            <el-switch  v-model="scope.row.estatus" @change="changStatus($event,scope.row)"  active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>

</template>

<style>
  .el-table{
    text-align: center;
  }
</style>

<script >

  export default {
    data() {
      var validatePassword =(rule,value,callback)=>{
        if (this.UserForm.passWord ==='') {
          callback(new Error('密码不能为空'));
        } else {callback();}
      };
      return {
        RoleValue: '',
        DepartValue: '',
        RoleOptions: [],
        DepartOptions: [],
        multipleSelection: [],
        OpenDialog: false,
        msg: '环境管理',
        tableData: [],
        UserForm: {
          name: '',
          realName: '',
          phone: '',
          estatus: '',
          switchStatus: true,
          id: '',
          email: '',
          passWord: '',
          role: '',
          depart: '',
          apiType: '1',
        },
        multipleTable: [],

/*        addrule:{
          passWord: [{validator: validatePassword, trigger: 'blur'}],
        }*/
      }

    },

    methods: {

      submit: function () {
        if (this.UserForm.name === ""){
          this.$notify({
            message: "登陆不能为空",
            duration: 1000
          });
        }else if (this.UserForm.role === "") {
          this.$notify({
            message: "请选择角色",
            duration: 1000
          });
        }else if(this.UserForm.depart === ""){
          this.$notify({
            message: "请选择部门",
            duration: 1000
          });
        }else {
          this.$axios.post("/api/EditEmployee",
            this.UserForm
          ).then(Response => {
              this.flush(),
                this.$notify({
                  message: Response.data.msg,
                  duration: 1000
                });
              this.cleanform();
            }
          )
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      flush: function () {
        this.$axios.post("/api/EmployeeList", {}).then(Response => {
          var data = [];
          for (let i = 0; i < Response.data.data.length; i++) {
            data[i] = Response.data.data[i];
          }
          this.tableData = data;
        })
      },
      //删除
      del: function () {
        let arr = this.multipleSelection;
        if (arr.length == 0) {
          this.$notify({
            message: '请先勾选删除项',
            duration: 1000
          })
        } else if (arr.length > 1) {
          this.$notify({
            message: '只能删除一项',
            duration: 1000
          });
          this.$refs.multipleTable.clearSelection();
        } else {
          this.$axios.post("/api/deleteEmployee?id=" + arr[0].id,
          ).then(Response => {
              this.flush(),
                this.$notify({
                  message: Response.data.msg,
                  duration: 1000
                });
              this.flush();
            }
          )
        }
      },
      reset: function () {
        let arr = this.multipleSelection;
        if (arr.length == 0) {
          this.$notify({
            message: '请先勾选',
            duration: 1000
          })
        } else if (arr.length > 1) {
          this.$notify({
            message: '只能勾选一项',
            duration: 1000
          });
          this.$refs.multipleTable.clearSelection();
        } else {
          this.$axios.post("/api/updatePassWordByID?id=" + arr[0].id,
          ).then(Response => {
              this.flush(),
                this.$notify({
                  message: Response.data.msg,
                  duration: 1000
                });
              this.flush();
            }
          )
        }
        },

      //编辑
      EditDialog: function () {
        let arr = this.multipleSelection;
        if(arr.length == 0){
          this.$notify({
            message: '请先勾选',
            duration: 1000
          })
        } else if(arr.length >1){
          console.log(arr.length)
          this.$notify({
            message: '只能编辑一项',
            duration: 1000
          });}else {
          this.$axios.post("/api/GetEmployeeByID?id=" + arr[0].id
          ).then(Response => {
            this.UserForm = Response.data.obj;
            this.UserForm.apiType = '2';
          })
          this.OpenDialog = true;
        }

      },

      //角色，部门下拉框
      RoleConf:function(){
        this.$axios("/api/RoleConf").then(Response=>{
          this.RoleOptions = Response.data.data;
        })
      },
      DepartConf:function () {
        this.$axios("/api/DepartConf").then(Response=>{
          this.DepartOptions = Response.data.data;
        })
      },
      Open:function () {
        this.RoleConf();
        this.DepartConf();
      },
      Close:function(){
        this.cleanform();
      },
      closeForm: function () {
        this.cleanform();
      },
      changStatus:function (val,param) {
        console.log(param);
        this.$axios.post("/api/UpdateStatus",{id:param.id,estatus:param.estatus}).then()
        this.flush();
      },
      cleanform:function(){
        this.UserForm.name = "";
        this.UserForm.realName = "";
        this.UserForm.passWord = "";
        this.UserForm.email = "";
        this.UserForm.phone = "";
        this.UserForm.depart = "";
        this.UserForm.role = "";
        this.OpenDialog = false;
        this.UserForm.apiType ='1' ;
      },
    },



    created: function () {
      this.flush();
    },

  }
</script>
